<template>
	<div id="ZheXianTu04"></div>
</template>

<script setup lang="ts">
	import { onMounted } from 'vue'
	import { Line } from '@antv/g2plot'

	const seriesKey = 'series'
	const valueKey = 'value'
	const processData = (data, yFields, meta) => {
		const result = []
		data.forEach((d) => {
			yFields.forEach((yField) => {
				const name = meta?.[yField]?.alias || yField
				result.push({ ...d, [seriesKey]: name, [valueKey]: d[yField] })
			})
		})
		return result
	}
	onMounted(() => {
		// fetch('https://gw.alipayobjects.com/os/antfincdn/nHVKXA8ClI/multiple-measures-line-data.json')
		// 	.then((data) => data.json())
		// 	.then((data) => {
				const data = [{ "price": 16508576.36, "date": "2021-12-09", "discount_price": 7248237.78 }, { "price": 25035905.36, "date": "2021-12-10", "discount_price": 7118531.77 }, { "price": 24448186.59, "date": "2021-12-11", "discount_price": 8564204.67 }, { "price": 27192262.24, "date": "2021-12-12", "discount_price": 10105604.74 }, { "price": 21004266.53, "date": "2021-12-13", "discount_price": 2174764.89 }, { "price": 28334329.68, "date": "2021-12-14", "discount_price": 8141962.81 }, { "price": 23567274.64, "date": "2021-12-15", "discount_price": 3132505.41 }, { "price": 28552897.64, "date": "2021-12-16", "discount_price": 10990514.43 }, { "price": 29183819.56, "date": "2021-12-17", "discount_price": 9401785.81 }, { "price": 21608638.85, "date": "2021-12-19", "discount_price": 4210388.45 }, { "price": 36470606.92, "date": "2021-12-21", "discount_price": 16239476.17 }, { "price": 30619949.07, "date": "2021-12-22", "discount_price": 6745541.62 }, { "price": 19044054.07, "date": "2021-12-23", "discount_price": 9241935.18 }]
				const meta = {
					date: {
						alias: '销售日期'
					},
					price: {
						alias: '单价'
					},
					discount_price: {
						alias: '折扣单价'
					}
				}
				const line = new Line('ZheXianTu04', {
					data: processData(data, ['price', 'discount_price'], meta),
					padding: 'auto',
					xField: 'date',
					yField: valueKey,
					seriesField: seriesKey,
					appendPadding: [0, 8, 0, 0]
				})

				line.render()
			// })
	})
</script>
